
<template>
    <div v-if="detailsVisible" >
         <div>
             <el-row style="margin: 10px 20px 10px 10px;">
                <span class="demonstration">年份：</span>
                <el-date-picker v-model="year" type="year" placeholder="" value-format="yyyy" @change="changeyaer"></el-date-picker>
                <div style="float: right">
                    <el-button  size="mini"    @click="serchfileA" >查询</el-button>
                    <el-button  size="mini"  @click="addfile" v-show="showAddOnly">新增</el-button>
                </div>
            </el-row>
            <el-table :data="recoderfilesTrue"  border  :empty-text="showemptytext" >
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="党委名称:">
                                <span>{{ props.row.dwname }}</span>
                            </el-form-item>
                            <el-form-item label="党支部名称:">
                                <span>{{ props.row.dzbname }}</span>
                            </el-form-item>
                            <el-form-item label="处分原因:">
                                <span>{{ props.row.cfreason }}</span>
                            </el-form-item>
                            <el-form-item label="处分文件:">
                                <div v-if="props.row.cfile==''"><a target="_blank" >无</a></div>
                                <div v-if="props.row.cfile!=''"><a target="_blank" :href="props.row.cfile">点击内容查看</a></div>
                            </el-form-item>
                            <el-form-item label="处分结果:">
                                <span>{{ props.row.cfjg }}</span>
                            </el-form-item>
                            <el-form-item label="">
                                <span></span>
                            </el-form-item>
                            <el-form-item label="撤销处分原因:">
                                <span>{{ props.row.cxcfreason }}</span>
                            </el-form-item>
                            <el-form-item label="撤销处分文件:">
                                <div v-if="props.row.cxcfile==''"><a target="_blank" >无</a></div>
                                <div v-if="props.row.cxcfile!=''"><a target="_blank" :href="props.row.cxcfile">点击内容查看</a></div>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column  width="65" label="标识" :show-overflow-tooltip='true' align="center">
                    <template slot-scope="scope">
                        <img class="default-image" :src="$store.state.images.wujiaoxing" style="width：45px;height:45px;"> 
                    </template> 
                </el-table-column>
                <el-table-column type="index" width="60" label="序号"  :index="indexbf" :show-overflow-tooltip='true'  align="center"></el-table-column>
                <el-table-column prop="year" width="100" label="年份"   :show-overflow-tooltip='true'  align="center"></el-table-column>
                <el-table-column prop="name" width="125" label="姓名" :show-overflow-tooltip='true'  align="center"></el-table-column>
                <el-table-column prop="personid" width="225" label="身份证号" :show-overflow-tooltip='true'  align="center"></el-table-column>
                <el-table-column prop="cftime" width="270" label="处分时间" :show-overflow-tooltip='true'  align="center"></el-table-column>
                <el-table-column prop="cxcftime" width="275" label="撤销处分时间" :show-overflow-tooltip='true'  align="center"></el-table-column>
                <el-table-column align="right" width="160px" >
                    <template slot-scope="scope">
                        <el-dropdown trigger="click" @command="handleCommand" v-if="showAddOnly==true">
                            <span class="el-dropdown-link">操作<i class="el-icon-caret-bottom el-icon--right"></i></span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item class="clearfix" :command="{data:scope.row,typed:'edit'}">撤销处分</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <pagination @changed="showDataTrue" :recoder="recoderfiles"> </pagination>
        </div>
        <jlcfadd ref='jlcfadd' v-on:editResult="serchfileA"></jlcfadd>
        <jlcfedit ref='jlcfedit' v-on:editResult="serchfileA"></jlcfedit>
    </div>
</template>
<script>
    import {mapActions} from 'vuex';
    export default {
        data: () => ({
            detailsVisible:true,
            showAddOnly:false,//显示添加的按钮,//只有党支部才可以显示添加
            recoderfiles:[], //获取到的文件
            recoderfilesTrue:[],//真正在表格里面显示的 由于分页等原因
            offset:0,
            year:'2015',
            default_emptytext:"请左侧选择年份并查询",
            showemptytext:'',
        }),
        mounted() {
            if(this.GetUser()==false){
                this.$router.push("/");
            }
            this.year=(new Date()).getFullYear()+''
            if(this.$store.state.Dw_DzbID.dwid==-1 && this.$store.state.Dw_DzbID.dzbid==-1 && this.$store.state.user.operation==0){
                this.showAddOnly=true;
            }
            else{
                this.showAddOnly=false;
            }
        },
        watch: {},
        components: {
            jlcfadd: function(resolve) {require(["./jlcfadd.vue"], resolve);},
            jlcfedit: function(resolve) {require(["./jlcfedit.vue"], resolve);},
        },
        methods: {
            ...mapActions(['GetUser']),
            changeyaer(year){
                this.serchfileA();
            },
            showDataTrue(showrecoders,offset){
                this.recoderfilesTrue=showrecoders;
                this.offset=offset;
            },
            indexbf(index){return index+this.offset+1;},
            serchfileA(){
                this.recoderfilesTrue=[];
                let _this=this;
                let postdata={
                    type:"selectjlcf",
                    split:JSON.stringify({
                        dwid:this.$store.state.Dw_DzbID.dwid,
                        dzbid:this.$store.state.Dw_DzbID.dzbid,
                        year:this.year,
                    })
                }
                this.$Common.AjaxPost(postdata,true)
                .then(function(e){
                    if(e.jlcfs.length==0){
                        _this.showemptytext='没有找到记录';
                        setTimeout(() => {
                            _this.showemptytext=_this.default_emptytext;
                        }, 1000);
                    }
                    else{
                        _this.recoderfiles=e.jlcfs; 
                    }
                }).catch(function(reason) {
                    console.log('catch:', reason);
                });
            },
            addfile()
            {
                this.$refs.jlcfadd.$data.dialogVisible = true;
                this.$refs.jlcfadd.$data.rowdata.year = this.year;
            },
            handleCommand(value){
                let personThis=value.data;
                if(value.typed=="edit"){// 主要用于撤销纪律处分 即更新纪律处分的信息
                    this.$refs.jlcfedit.$data.dialogVisible = true;
                    this.$refs.jlcfedit.$data.rowdata.year = personThis.year;
                    this.$refs.jlcfedit.$data.rowdata.cftime = personThis.cftime;
                    this.$refs.jlcfedit.$data.rowdata.name = personThis.name;
                    this.$refs.jlcfedit.$data.rowdata.personid = personThis.personid;
                    this.$refs.jlcfedit.$data.rowdata.rowid = personThis.rowid;


                    
                }
            },
        }
    }
</script>
<style scoped>
.demo-table-expand {
    font-size: 0;
  }
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
